<template>
  <div class="app-container">
    <!-- 课程信息表单 -->
    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input
          v-model="courseInfo.title"
          placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称请注意大小写"
        />
      </el-form-item>

      <!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :value="teacher.id"
            :label="teacher.name"
          />
        </el-select>
      </el-form-item>

      <!-- 所属分类 -->
      <el-form-item label="课程分类">
        <!-- 一级分类 -->
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="请选择"
          @change="subjectChanged"
        >
          <el-option
            v-for="subject in subjectList"
            :key="subject.id"
            :value="subject.id"
            :label="subject.title"
          />
        </el-select>

        <!-- 二级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="请选择">
          <el-option
            v-for="subject in subjectLevelTwoList"
            :key="subject.id"
            :value="subject.id"
            :label="subject.title"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="courseInfo.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>

      <!-- 课程简介-->
      <el-form-item label="课程简介">
        <Tinymce :height="300" v-model="courseInfo.description" />
      </el-form-item>

      <!-- 课程封面 -->
      <el-form-item label="课程封面">
        <el-upload
          :show-file-list="false"
          :on-success="handleCoverSuccess"
          :before-upload="beforeCoverUpload"
          :on-error="handleCoverError"
          class="cover-uploader"
          accept="image/jpeg,image/png"
          :action="BASE_API + '/admin/oss/upload?module=cover'"
        >
          <img v-if="courseInfo.cover" :src="courseInfo.cover" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseInfo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />
        元
      </el-form-item>
    </el-form>

    <div style="text-align: center">
      <el-button
        :disabled="saveBtnDisabled"
        type="primary"
        @click="saveAndNext()"
        >保存并下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";

import {
  saveCourseInfo,
  getCourseInfoById,
  updateCourseInfo,
} from "@/api/course";
import { getList } from "@/api/teacher";
import { getSubjectList } from "@/api/subject";

export default {
  components: { Tinymce },

  data() {
    return {
      saveBtnDisabled: false,
      courseInfo: {
        //表单数据
        price: 0,
        lessonNum: 0,
        teacherId: "",
        subjectId: "",
        subjectParentId: "",
        cover: "",
        description: "",
      },
      teacherList: [], //讲师列表
      subjectList: [], //一级分类
      subjectLevelTwoList: [], //二级分类
      BASE_API: process.env.VUE_APP_BASE_API
    };
  },
  created() {
    //courseId来源于路由
    // if (this.$route.name === "CourseInfoEdit") {
    //   this.$parent.courseId = this.$route.params.id;
    // }
    //courseId来源于父组件
    if (this.$parent.courseId) {
      this.fetchCourseInfoById(this.$parent.courseId); //回显
    } else {
      this.initSubjectList(); //说明是新增状态
    }
    this.initTeacherList();
  },
  methods: {
    //根据id获取课程基本信息
    fetchCourseInfoById(id) {
      getCourseInfoById(id).then((response) => {
        this.courseInfo = response.data;

        //课程类别渲染
        getSubjectList().then((response) => {
          this.subjectList = response.data;

          // 判断 this.subjectList下哪个一级类别是当前绑定的一级类别
          this.subjectList.forEach((subject) => {
            if (subject.id === this.courseInfo.subjectParentId) {
              // 找到对应一级类别的二级类别列表
              this.subjectLevelTwoList = subject.children;
            }
          });
        });
      });
    },
    initTeacherList() {
      getList().then((res) => {
        this.teacherList = res.data;
      });
    },
    initSubjectList() {
      getSubjectList().then((res) => {
        this.subjectList = res.data;
      });
    },
    //下拉列表联动
    subjectChanged(value) {
      this.subjectList.forEach((subject) => {
        if (subject.id === value) {
          // 清空当前值
          this.courseInfo.subjectId = "";
          this.subjectLevelTwoList = subject.children;
        }
      });
    },
    //保存并下一步
    saveAndNext() {
      this.saveBtnDisabled = true;
      if (this.$parent.courseId) {
        this.updateDate();
      } else {
        this.saveDate();
      }
    },
    saveDate() {
      saveCourseInfo(this.courseInfo).then((res) => {
        this.$message.success(res.message);
        this.$parent.courseId = res.data; //获取课程id
        this.$parent.active = 1; //访问父组件的成员变量
      });
    },
    updateDate() {
      updateCourseInfo(this.courseInfo).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.$parent.active = 1;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //上传成功回调
    handleCoverSuccess(res) {
      if (res.success) {
        this.courseInfo.cover = res.data;
        //强制重新渲染
        //this.$forceUpdate();
      } else {
        this.$message.error(res.message);
      }
    },
    //文件上传失败（http）
    handleCoverError() {
      this.$message.error("网络错误！上传失败");
    },
    //上传校验
    beforeCoverUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png"; // MIME格式
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传的头像图片只能是 JPG 或 PNG 格式！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB！");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
.tinymce-container {
  position: relative;
  line-height: normal;
}

.cover-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cover-uploader .el-upload:hover {
  border-color: #409eff;
}
.cover-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 640px;
  height: 357px;
  line-height: 357px;
  text-align: center;
}
.cover-uploader img {
  width: 640px;
  height: 357px;
  display: block;
}
</style>